<template>
    <div>
        <input type="file" class="inputfile" ref='file' @change="uploadFile" >
      <img @click="startUpload"  class="avatar" :src="userInfo.avatar?userInfo.avatar.replace(/public/,$host):require('@/assets/images/photo.png')" alt="" />
    </div>

</template>

<script>
import { mapState , mapMutations} from "vuex";

export default {
    computed:{
        ...mapState(['userInfo'])
    },
    methods:{
        ...mapMutations(['setUserInfo']),
        startUpload(){
            this.$refs.file.click()
        },
        uploadFile(){
           var file = this.$refs.file.files[0];
            var data=new FormData()
            data.append('file',file)
            console.log(file);
            this.$ajax.uploadavatar(data).then(res=>{
                 this.setUserInfo({avatar:res.avatar.replace(/public/,this.$host)})
                 console.log(this.userInfo.avatar)
            })
        }
    }

}
</script>




<style lang="scss" scoped>
.inputfile{
    display: none;
}
.avatar{
    width:63px;
    height:63px;
    border-radius: 50%;
    img{
        width:63px;
        height:63px;
        border-radius: 50%;
    }
}

</style>
